<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
</head>
<link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/amazeui.min.css}"/>
<link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/font-awesome.4.6.0.css}"/>
<link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/amazeui.cropper.css}"/>
<link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/custom_up_img.css}"/>


<style type="text/css">
    .up-img-cover {width: 100px;height: 100px;}
    .up-img-cover img{width: 100%;}
</style>


<style>
    body{
        padding:0;
        margin:0;
    }
    *{
        text-decoration: none;
    }
    .my_box{
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 15px;
        border: 1px solid #ccc;
        position: absolute;
        left: 50px;
        right: 0;
        top: 59px;
        bottom: 0;
        /* margin: auto; */
        transition: .6s;
        cursor: pointer;
    }
    .my_boxMessage{
        width: 160px;
        height: 26px;
        overflow: hidden;
        position: absolute;
        left: 20px;
        right: 0;
        top: 30px;
        bottom: 0;
        margin-bottom:5px;
        cursor: pointer;
        display: none;
    }
    .my_boxMessageA{
        width: 80px;
        height: 26px;
        float: left;
    }
    .my_boxButton{
        background-color: #efeeed;
        width: 100%;
        height: 25px;
        border-radius: 15px;
        border: 1px solid #ccc;
        outline:none;
        font-size: 10px;
    }

    .my_boxButton:hover {
    background-color: #fffccc;
    }


    /*active 要在后面 否则会被hover覆盖*/


    .my_boxButton:focus {
    background-color: #fffccc;
    }


    .my_boxButton:active {
        background-color: #fffccc;
        }
    .my_box:hover{
        animation:my_box 0.5s forwards;
        transition: .5s;
    }
    @keyframes my_box{
        form{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
    .my_box img{
        width:100%;
    }
    .xiantiao{
        display: block;
        width:86%;
        height:1px;
        border-bottom: 1px solid #ccc;
        margin:0 auto;
    }

    .pic_box{
        width:600px;
        min-height:500px;
        height:500px;
        border-radius:8px;
        background: #fff;
        border:1px solid #ccc;
        position: fixed;
        top:-1000px;
        left:0;
        right:0;
        margin:0 auto;
    }
    .header{
        height:45px;
        text-align: center;
    }
    .close{
        color:#000;
        font-size: 21px;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;
        opacity: .2;
        position:absolute;
        right:8px;
        top:2px;
        cursor: pointer;
    }
    .pic_box ul{
        padding: 0;
        margin:0;
        width:96%;
        height:511px;
        margin:10px auto;
    }
    .pic_box ul li{
        display: block;
        list-style: none;
        width:61px;
        height:61px;
        float: left;
        border-radius: 15%;
        border:1px solid #ccc;
        margin:5px 5px;
        transition: .6s;
        cursor: pointer;
        overflow: hidden;
    }
    .pic_box ul li:hover{
        transform: scale(1.15);
        transition: .5s;
    }
    .pic_box ul li img{
        width:100%;
    }
    .bt_box{
        width: 100%;
        text-align: center;
        font-size: 14px;
        margin-top: -120px;
    }
    .bt_box .gb{
        display:inline-block;
        width:120px;
        height:35px;
        border-radius: 8px;
        background:#f3f3f3;
        color:#444;
        line-height: 35px;
    }
    .bt_box .queren{
        display: inline-block;
        width:120px;
        height:35px;
        border-radius: 8px;
        background:#4B8BF5;
        color:#fff;
        line-height: 35px;
    }
    .am-modal-dialog{
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        width: 270px;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        background: #f8f8f8;
    }
    .tdCaption{
        background-color: #f9f9f9;
        width: 120px;
    }
    .imgS{
        margin-right: 10px;
    }
</style>

<body>

<div class=" table-responsive" id="mainTable" style="padding-top: 30px; margin-left: 200px;margin-right: 25px;">
    <table class="table table-bordered" >
        <tbody>
        <tr>
            <td class="tdCaption"><img class="imgS" src="../img/indexicon/name.png" alt="">姓名</td>
            <td class="tdCaption1" ><label id="tec_xm" style="font-weight:normal;">吴凯益</label></td>

            <td class="tdCaption"><img  class="imgS" alt="" src="../img/indexicon/stuno.png">学号</td>
            <td class="tdCaption1" ><label id="tec_xh" style="font-weight:normal;"></label></td>

            <td class="tdCaption"><img  class="imgS" alt="" src="../img/indexicon/xl.png">学制</td>
            <td class="tdCaption1" ><label id="tec_xz" style="font-weight:normal;"></label></td>

        </tr>
        <tr>
            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/sex.png">性别</td>
            <td class="tdCaption1" ><label id="tec_xb" style="font-weight:normal;">女</label></td>

            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/bm.png">所属系部</td>
            <td class="tdCaption1" ><label id="tec_ssxb" style="font-weight:normal;"></label></td>

            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/zzmm.png">年级</td>
            <td class="tdCaption1" ><label id="tec_nj" style="font-weight:normal;"></label></td>
        </tr>
        <tr>



        </tr>
        <tr>
            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/mz.png">民族</td>
            <td class="tdCaption1"><label id="tec_mz" style="font-weight:normal;"></label></td>

            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/jg.png">生源地</td>
            <td class="tdCaption1"><label id="tec_syd" style="font-weight:normal;">1981-08-19</label></td>

            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/zc.png">生源类型</td>
            <td class="tdCaption1"><label id="tec_sylx" style="font-weight:normal;"></label></td>
        </tr>
        <tr>
            <td class="tdCaption"><img class="imgS" alt="" src="../img/indexicon/ny.png">入学日期</td>
            <td class="tdCaption1"><label id="tec_rx" style="font-weight:normal;">1981-08-19</label></td>

        </tr>


        </tbody>
    </table>
</div>
    <div class="my_boxMessage">
        <div class="my_boxMessageA">
            <button class="my_boxButton" id="host"><i class="fa fa-bell-o">&nbsp;初始头像</i></button>
        </div>
        <div class="my_boxMessageA">
            <button class="my_boxButton" id="upload"><i class="fa fa-bell-o">&nbsp;本地上传</i></button>
        </div>
    </div>
    <div class="my_box">
        <form id="uploadForm">
            <input class="jide" name="imgsrc" type="hidden" value="" />
            <img src="" class="my_pic" data-am-popover="{theme: 'primary sm',content: '点击更改头像', trigger: 'hover focus'}"/>
        </form>
    </div>
    <div class="pic_box" id="pic_box">
        <div class="header">
            <p>设置头像</p>
            <span class="close">x</span>
        </div>
        <span class="xiantiao"></span>

        <ul id="imgsUl">
            <li th:each="list : ${imgUrl}">
                <img th:src="${list}"/>
            </li>
        </ul>
        <div class="bt_box">
            <a class="gb" href="javascript:">关闭</a>
            <a class="queren" href="javascript:">保存头像</a>
        </div>
    </div>

    <div><a style="text-align: center; display: block;"  id="pic"></a></div>

    <!--图片上传框-->
    <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
        <div class="am-modal-dialog up-frame-parent up-frame-radius">
            <div class="am-modal-hd up-frame-header">
                <label>修改头像</label>
                <a id="colseMode" href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd  up-frame-body">
                <div class="am-g am-fl">
                    <div class="am-form-group am-form-file">
                        <div class="am-fl">
                            <button type="button" class="am-btn am-btn-default am-btn-sm">
                                <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                        </div>
                        <input type="file" id="inputImage">
                    </div>
                </div>
                <div class="am-g am-fl" >
                    <div class="up-pre-before up-frame-radius">
                        <img alt="" src="" id="image" >
                    </div>
                    <div class="up-pre-after up-frame-radius">
                    </div>
                </div>
                <div class="am-g am-fl">
                    <div class="up-control-btns">
                        <span class="am-icon-rotate-left"  onclick="rotateimgleft()"></span>
                        <span class="am-icon-rotate-right" onclick="rotateimgright()"></span>
                        <span class="am-icon-check" id="up-btn-ok"></span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <input id="userName" th:value="${userName}" hidden />
    <script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
    <script language='JavaScript' th:src='@{/js/cropper.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/AmazeUI/js/amazeui.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
    <script language='JavaScript' th:src='@{/js/network.js}'></script>
    <script language='JavaScript' th:src='@{/js/common.js}'></script>
    <script language='JavaScript' th:src='@{/js/public.js}'></script>

    <script language='JavaScript'>
        var width = $("#mainTable").width();
        $(".tdCaption1").width((width-120*3)/3);

        ajax.postData(publicData.urls.user.getInformation, {},
            function (data) {
                if(data != null && data != "" && data != "null"){
                    $('#tec_xh').html(data[0].xh);
                    $('#tec_xm').html(data[0].xm);
                    $('#tec_xb').html(data[0].xb);
                    $('#tec_mz').html(data[0].mz);
                    $('#tec_rx').html(data[0].rxrq);
                    $('#tec_nj').html(data[0].nj);
                    $('#tec_syd').html(data[0].syd);
                    $('#tec_xz').html(data[0].xz);
                    $('#tec_ssxb').html(data[0].ssxb);
                    $('#tec_sylx').html(data[0].sylx);
                }
            });

        $(function() {
            'use strict';
            // 初始化
            var $image = $('#image');
            $image.cropper({
                aspectRatio: '1',
                autoCropArea:0.8,
                preview: '.up-pre-after',

            });

            /*        // 事件代理绑定事件
                    $('.docs-buttons').on('click', '[data-method]', function() {

                        var $this = $(this);
                        var data = $this.data();
                        var result = $image.cropper(data.method, data.option, data.secondOption);
                        switch (data.method) {
                            case 'getCroppedCanvas':
                                if (result) {
                                    // 显示 Modal
                                    $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                                    $('#download').attr('href', result.toDataURL('image/jpeg'));
                                }
                                break;
                        }
                    });*/

            // 上传图片
            var $inputImage = $('#inputImage');
            //作为预览使用
            var URL = window.URL || window.webkitURL;
            var blobURL;
            if (URL) {
                $inputImage.change(function () {
                    var files = this.files;
                    var file;
                    if (files && files.length) {
                        file = files[0];
                        //判断是不是图片格式
                        if (/^image\/\w+$/.test(file.type)) {
                            blobURL = URL.createObjectURL(file);
                            $image.one('built.cropper', function () {
                                // Revoke when load complete
                                URL.revokeObjectURL(blobURL);
                            }).cropper('reset').cropper('replace', blobURL);
                            $inputImage.val('');
                        } else {
                            messageBox.error("请选择图片类型文件");
                        }
                    }
                });
            } else {
                $inputImage.prop('disabled', true).parent().addClass('disabled');
            }

            //绑定上传事件
            $('#up-btn-ok').on('click',function(){
                var img_src=$image.attr("src");
                if(img_src==""){
                    messageBox.error("没有选择上传的图片");
                    return false;
                }


                var canvas=$("#image").cropper('getCroppedCanvas');
                var data=canvas.toDataURL("image/jpeg",0.7); //转成base64
                var imgs = data.toString();
                var userName=$("#userName").val()
                ajax.postData(publicData.urls.personal.savePhoto,{"image":imgs,"userName":userName}, function (data) {
                    if(data=="ok"){
                        $("#colseMode").click()
                        messageBox.success("图片上传成功");
                        getPhoto();
                    }else{
                        messageBox.error("上传文件失败了");
                    }
                });

            });

        });

        function rotateimgright() {
            $("#image").cropper('rotate', 90);
        }


        function rotateimgleft() {
            $("#image").cropper('rotate', -90);
        }
    </script>


<script type="text/javascript">
    $(".my_boxMessage").hide();
    $("#host").click(function(){
        $(".my_boxMessage").hide();
        $(".pic_box").animate({
            'top':'15px',
        },300);
    }),
    $("#upload").click(function(){
            $(".my_boxMessage").hide();
        $("#doc-modal-1").modal({width:'600px'});
    }),
    $(".close,.gb").click(function(){
        $(".pic_box").animate({
            'top':'-1000px'
        },500);
    }),
        $(".my_box").click(function(){
            if($(".my_boxMessage").is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏
                $(".my_boxMessage").show();
            }else{
                $(".my_boxMessage").hide();
            }
        }),
        $(".queren").click(function(){
            var src = $(".jide").val();
            var userName=$("#userName").val()
            //效果展示,在服务器中把这一段删除,用上面那一段
            if(src != ""){
                ajax.postData(publicData.urls.personal.savePhoto,{"image":src,"userName":userName}, function (data) {
                    if(data=="ok"){
                        $("#colseMode").click()
                        messageBox.success("头像更改成功");
                        getPhoto();
                    }else{
                        messageBox.error("头像更改失败");
                    }
                });
                $(".pic_box").animate({
                    'top':'-1000px'
                },500);
            }else{
                return false;
            }

        });
    var $box = document.getElementById('pic_box');
    var $li = $box.getElementsByTagName('li');
    var index = 0;
    for(var i=0;i<$li.length;i++){
        $li[i].index=i;
        $li[i].onclick=function(){
            $li[index].style.borderRadius="15%";
            this.style.borderRadius="50%";
            index = this.index;
        }
    }
    $(".pic_box li img").click(function(){
        var src=$(this).attr("src");
        $(".jide").val(src);
    })

    getPhoto();
    function getPhoto() {
        var userName=$("#userName").val()
        ajax.postData(publicData.urls.personal.getPhoto,{"userName":userName}, function (data) {
            if(data.length!=0){
                $(".my_pic").attr('src',data[0]);
                $('#myHead', window.parent.document).attr('src',data[0]);
            }else{
                messageBox.error("头像取出失败");
            }


        });




    }



</script>

</body>
</html>